<template>
  <div class="choose-school-container">
    <h2>选择学校</h2>
    <input
    class="search-input"
      type="text"
      v-model="searchQuery"
      placeholder="搜索学校..."
      @input="filterSchools"
    />
    <ul class="school-list">
      <li
        v-for="school in filteredSchools"
        :key="school._id"
        @click="selectSchool(school)"
        class="school-item"
      >
        {{ school.name }}
      </li>
    </ul>
    <button @click="submitSelection" class="submit-button">提交选择</button>
    <p @click="redirectToHome" class="redirect-text">稍后再选</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { useStore } from '../stores/userStore'

const router = useRouter()
const store = useStore()

const schools = ref([]) // 存储学校数据
const filteredSchools = ref([]) // 存储过滤后的学校数据
const searchQuery = ref('') // 搜索框的输入内容

// 获取学校数据
async function fetchSchools() {
  try {
    const response = await axios.get('http://localhost:5000/school')
    schools.value = response.data
    filteredSchools.value = response.data // 初始化为所有学校
    console.log('学校数据:', schools.value)
  } catch (error) {
    console.error('获取学校数据失败:', error)
  }
}

// 过滤学校
function filterSchools() {
  if (searchQuery.value) {
    filteredSchools.value = schools.value.filter(school =>
      school.name.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  } else {
    filteredSchools.value = schools.value
  }
}

// 选择学校
function selectSchool(school) {

  store.user.school = school.name // 更新用户选择的学校
  searchQuery = school.name
}

// 提交选择
async function submitSelection() {
  alert('学校选择后不可再更改，确定是这个学校吗？')
  const token = localStorage.getItem('token')
  try {
    await axios.put('http://localhost:5000/users/me', { school: store.user.school }, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
    console.log(store.user.school)

    router.push('/self') // 提交后返回用户信息页面
  } catch (error) {
    console.error('更新学校信息失败:', error)
  }
}

onMounted(() => {
  fetchSchools() // 组件挂载时获取学校数据
})
function redirectToHome(){
  router.push('/')
}
</script>
<style>
body {
  background-color: #1f1b24;
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar{
  display: none;
}
</style>
<style scoped>
.content {
  position: absolute; /* 绝对定位 */
  top: 60px; /* 距离顶部的距离等于顶部区域的高度 */
  left: 10vw; /* 距离左侧的距离等于左侧区域的宽度 */
  right: 10vw; /* 距离右侧为0，撑满剩余空间 */
  bottom: 0; /* 距离底部为0，撑满剩余空间 */
  padding: 20px; /* 为内容添加内边距 */
}
.choose-school-container {
  width: 500px; /* 最大宽度 */
  padding: 20px;
  border-radius: 10px;
  background-color: #ffffff; /* 白色背景 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

h2 {
  text-align: center; /* 标题居中 */
  color: #4A4A4A; /* 深灰色文本 */
  margin-bottom: 20px; /* 加大底部间距 */
}

.search-input {
  width: 100%; /* 输入框占满父容器 */
  padding: 12px; /* 增加内边距 */
  margin-bottom: 20px; /* 输入框底部间距 */
  border: 2px solid #B0BEC5; /* 较浅的边框 */
  border-radius: 5px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  transition: border-color 0.3s; /* 平滑过渡效果 */
}

.search-input:focus {
  border-color: #00aeff; /* 聚焦时边框颜色 */
  outline: none; /* 去掉轮廓 */
}

.school-list {
  list-style: none; /* 去掉列表符号 */
  padding: 0; /* 去除内边距 */
}

.school-item {
  cursor: pointer;
  padding: 12px;
  border: 1px solid #B0BEC5; /* 较浅的边框 */
  border-radius: 5px; /* 圆角 */
  margin: 5px 0; /* 上下间隔 */
  background-color: #F1F8E9; /* 浅绿色背景 */
  transition: background-color 0.3s, transform 0.2s; /* 平滑过渡效果 */
}

.school-item:hover {
  background-color: #C8E6C9; /* 悬停时的背景颜色 */
  transform: translateY(-2px); /* 悬停时稍微上移 */
}

.submit-button {
  width: 100%; /* 按钮占满父容器 */
  padding: 12px;
  background-color: #00aeff; /* 深绿色背景 */
  color: white;
  border: none;
  border-radius: 5px; /* 圆角 */
  cursor: pointer;
  font-size: 16px; /* 字体大小 */
  transition: background-color 0.3s; /* 平滑过渡效果 */
}

.submit-button:hover {
  background-color: #00aeff; /* 悬停时的深绿色 */
}
.redirect-text {
  text-align: center; /* 文本居中 */
  color: #8f9192; /* 颜色与按钮一致 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  margin-top: 10px; /* 上方间距 */
  font-size: 14px; /* 字体大小 */
  transition: color 0.3s; /* 平滑过渡效果 */
}

.redirect-text:hover {
  text-decoration: underline; /* 悬停时添加下划线 */
  color: #007acc; /* 悬停时改变颜色 */
}
</style>
